<template>
  <div id="app">
    <router-view />
    <theme-picker />
  </div>
</template>

<script>
import ThemePicker from "@/components/ThemePicker";

export default {
  name: "App",
  components: { ThemePicker },
  data() {
    return {
      isHidden: false // 页面是否被隐藏（初始值为false）
    };
  },
  created () {
    // 监听document visibilityState变化事件（用于监听页面是否被隐藏）
    document.addEventListener('visibilitychange', this.onVisibilityChange);
    this.$store.commit("getTheme");		/*加载上次退出是选择的主题*/
  },
  destroyed () {
    // 解除监听事件
    document.removeEventListener('visibilitychange', this.onVisibilityChange);
  },
  methods: {
    // 监听页面是否被隐藏
    onVisibilityChange () {
      this.isHidden = document.hidden;
      if (this.isHidden) { // 当前页被隐藏
        document.title = "快回来啊"
      } else { // 当前页被打开
        document.title = process.env.VUE_APP_TITLE
      }
    },
    changeColor() {
      let hue = 0;
      let saturation = 70;
      let lightness = 70;
      let hsl = 'hsl(0, 75%, 55%)'
      setInterval(() => {
        if (hue>360){
          hue = 0
        }
        hue++
        hsl = 'hsl('+hue+', '+saturation+'%, '+lightness+'%)'
        document.documentElement.style.setProperty('--vp-color-gradient', hsl);
      }, 100); // 0.1秒改变一次颜色
    }
  },
  mounted() {
    // 如果是生产环境才执行
    if (process.env.ENV == 'production'){
      console.log(111111)
      this.changeColor(); // 组件挂载后开始改变颜色
    }
  },
  metaInfo() {
    return {
      title: this.$store.state.settings.dynamicTitle && this.$store.state.settings.title,
      titleTemplate: title => {
        return title ? `${title} - ${process.env.VUE_APP_TITLE}` : process.env.VUE_APP_TITLE
      }
    }
  }
};
</script>
<style >
#app .theme-picker {
  display: none;
}


* {
  transition: all 0.2s ease-out;		/*加上过渡使主题转换更加自然 */
}
.el-input__inner {
  transition: all 0.2s ease-out;		/*必须单独添加，不然el-input的组件过渡效果不能生效*/
}
</style>
